<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="icon" href="favicon.ico">
    <style>
        .el-table .el-table__cell {
            padding: 0;

        }
        .item {
            margin-top: 10px;
            margin-right: 40px;
        }
    </style>
    <link rel="stylesheet" href="logo.css">
    <link rel="stylesheet" href="css/quwan.css">
    <link rel="stylesheet" href="./icon/1-ico/iconfont.css">
    <link  rel="stylesheet"   href="./icon/2-ico/iconfont.css">


</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="wrap">
        <p style="float: left;color: #ccc">好的生活, 没那么贵</p>
        <ul class="header-right">
            <li><a href="/login.html">登录</a><span>|</span></li>
            <li><a href="/reg.html">注册</a><span>|</span></li>
            <li><a href="#">常见问题</a><span>|</span></li>
            <li><a href="#">联系我们</a><span>|</span></li>
            <li><a href="#">关于我们</a><span>|</span></li>
            <li>
                <a href="#">客户服务</a><span>|</span>
            </li>
            <li>
                <a href="#"><i class="el-icon-mobile-phone"></i>微信关注</a>
                <div class="download">
                    <img src="imgs/weixin.jpg" alt="">
                    <p>微信关注扫一扫</p>
                </div>
                <div class="triangle">
                </div>
            </li>
        </ul>
    </div>
</div>
<!--头部结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">


        <div style="position: relative;">
            <div class="logo">
                <a href="/">
                <img src="imgs/logo.gif" alt="">
                </a>
            </div>
            <div class="search">
                <input class="search-input" type="text" placeholder="输入商品关键词搜索">
                <a href=""  class="search-btn">
                    <span style="font-weight: bold" class="iconfont icon-suosou"></span>
                </a>
                <a href=""  class="search-btn" onclick="shop()">
                    <span class="iconfont icon-gouwuche"></span>
                </a>
            </div>
        </div>

        <div class="nav-bar">
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">严选好物</a>
                    <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-bar-img">
                                            <img style="width: 44px;height: 44px;" src="imgs/logo3.png" alt="">
                                        </div>
                                        <p>生活家电</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-bar-img">
                                            <img style="width: 44px;height: 44px;" src="imgs/logo4.png" alt="">
                                        </div>
                                        <p>日用家居</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-bar-img">
                                            <img style="width: 44px;height: 44px;" src="imgs/logo5.png" alt="">
                                        </div>
                                        <p>个护配饰</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-bar-img">
                                            <img style="width: 44px;height: 44px;" src="imgs/logo6.png" alt="">
                                        </div>
                                        <p>特色食品</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">产品运营</a></li>
                <li><a href="#">我们的优势</a></li>
                <li><a href="#">我们的客户</a></li>
            </ul>
        </div>

        <div class="icon">

        </div>
    </div>
</div>
<!--导航结束-->
<el-footer>
    <el-badge is-dot class="item">数据查询</el-badge>
    <el-badge is-dot class="item">
        <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
    </el-badge>
</el-footer>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                wd: "",
                topArr: [{title: "小米电视", saleCount: 688},
                    {title: "李宁毛巾", saleCount: 548},
                    {title: "安踏拖鞋", saleCount: 435},
                    {title: "华为手机", saleCount: 322},
                    {title: "匹克球鞋", saleCount: 256},
                    {title: "联想电脑", saleCount: 198}],
                productArr: [{
                    title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
                    price: 233,
                    oldPrice: 598,
                    url: "imgs/a.jpg",
                    saleCount: 2342
                },
                    {
                        title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/b.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/c.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/d.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/e.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/f.jpg",
                        saleCount: 2342
                    },
                    {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "imgs/g.jpg", saleCount: 2342},
                    {
                        title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/h.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/i.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/j.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/k.jpg",
                        saleCount: 2342
                    },
                    {
                        title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",
                        price: 233,
                        oldPrice: 598,
                        url: "imgs/a.jpg",
                        saleCount: 2342
                    }]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(index, indexPath) {
                v.$message(index);
            },
            search() {
                v.$message("搜索的内容是: " + v.wd);
            }
        }
    })
</script>
</html>